import React, { useEffect, useMemo } from 'react';
import { Button, Empty, Skeleton, message } from 'antd'
import { useRequest } from '@/hooks';
import { history } from 'umi'

import { isSuccess } from '@/utils/request';

import { checkTemplateConfig, financeInit, authCheck } from '@/services/salaryManage/salaryCommon';
import { sessionStorageUtil } from '@/pages/SalaryManage/utils/storageUtil';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';
import { OrganizationNameHead } from '@/pages/SalaryManage/components/OrganizationName';


const DescView = ({ organizationCode }) => <span
>亲爱的HR，【<OrganizationNameHead style={{ display: 'inline-block' }} organizationCode={organizationCode} />】薪资还未配置哦~</span>;

const goToConfig = organizationCode => {
    const salaryTemplatePath = '/finance/salary/calculate/templatesetting/salarytemplate';

    authCheck({
        pagePath: salaryTemplatePath,
        apiUrl: '/api/uc/org/ads/v1/orgLinkList',
        apiMethod: 'POST',
        orgCode: organizationCode
    })
        .then(response => {
            if (isSuccess(response)) {
                // 没有数据权限
                if (!response.data) {
                    message.error('无配置权限');
                    return;
                }
                // 跳转至薪资模板配置页
                history.push({
                    pathname: salaryTemplatePath,
                    state: { tabRoute: true, tabRefresh: true, organizationCode }
                });
            } else {
                message.error(response.msg);
            }
        });
};


export default ({ children, slotWrapper, organizationCode }) => {
    // 查询是否已经配置月模板
    const { run, data, loading } = useRequest(orgCode => {
        const salaryConfig = sessionStorageUtil.getItemInFinance('salaryConfig') || {};
        if (salaryConfig[orgCode] !== undefined) {
            return new Promise(resolve => resolve(salaryConfig[orgCode]));
        }

        return Promise.all([financeInit(orgCode), checkTemplateConfig(orgCode)]).then(([, response]) => {
            if (response?.data === false) {
                sessionStorageUtil.setItemInFinance('salaryConfig', { ...salaryConfig, [orgCode]: response?.data });
            }
            return response?.data
        });
    }, { manual: true });

    useEffect(() => {
        if (organizationCode) {
            run(organizationCode)
        }
    }, [organizationCode, run]);

    const showConfigTip = useMemo(() => data ?? false, [data]);

    return (
        <React.Fragment>
            <div style={ { display: loading || !organizationCode ? 'none' : '' } }>
                {showConfigTip
                    ? (
                        <div className={salaryStyle.salaryWrapper}>
                            <Empty
                                description={<DescView organizationCode={organizationCode}/>}
                                style={{ paddingTop: 70, paddingBottom: 50, background: '#fff', margin: 0, position: 'relative' }}
                            >
                                <Button type="primary" onClick={() => goToConfig(organizationCode)} style={{ marginTop: 30 }}>
                                    立即配置
                                </Button>
                                {slotWrapper}
                            </Empty>
                        </div>
                    )
                    : (
                        children
                    )}
            </div>
            <Skeleton loading={loading || !organizationCode} />
        </React.Fragment>
    );
};
